<template>
<div>
    <!-- 轮播 -->
        <div class="h-banner" v-if="type1 || type0">
        
        </div>
        <div class="h-banner h-banner2" v-if="type2">
          
        </div>
        <div class="h-banner h-banner3" v-if="type3">
      
        </div>
        <div class="car-main-content">
          <div class="container-1200">
            <!--标题-->
            <div class="title wy-m-t-20 wei_nongchun">
                <p>首页 / <span>农村物流</span></p>
            </div>
          </div>
          <div class="village-search">
             <div class="container-1200 wei_s-place-260">

                <div class="v-search1" v-if="type1 || type0">
                    <a-form :form="form">
                  		<a-row :gutter='24' >
                            <a-col :span='6'>
                                  <a-form-item label="产地:"  :label-col="{ span: 6}" :wrapper-col="{ span:16 }">
                                        <a-input  placeholder="请选择产品生产地"  v-model="producePlace" class="s-place-260" @click="magSvgShowMap('departureCar')"/>
                                  </a-form-item>
                            </a-col>
                            <a-col :span='5' class="s-place-260">
                                  <a-form-item label="农产品类型:"  :label-col="{ span: 9}" :wrapper-col="{ span:14}" >
                                       <a-select placeholder="全部" v-model="type"  class="s-place-260">
                                            <a-select-option value="">全部</a-select-option>
                                            <a-select-option v-for="(itme,index) in agriList" :key="index" :value="itme.dictKey">
                                              {{itme.dictValue}}
                                            </a-select-option>
                                       </a-select>
                                  </a-form-item>
                            </a-col>
                            <a-col :span='4' >
                              <a-form-item label="价格区间:"  :label-col="{ span: 10}" :wrapper-col="{ span:10 }">
                                 <a-input  class="s-place-260"  v-model="startPrice" ></a-input>
                                 <!-- v-model="startPrice" -->
                              </a-form-item>
                            </a-col>
                             <a-col :span='2' >
                              <a-form-item >
                                  <a-input  class="s-place-260"  style="margin-left:-45px" v-model="endPrice"> </a-input>
                                  <!-- v-model="endPrice" -->
                              </a-form-item>
                            </a-col>
                            <a-col :span='2' style="margin-left:-50px;width:120px;">

                                <a-select v-model="priceUnit">
                                  <a-select-option v-for="(itme,index) in priceList" :key="index" :value="itme.dictKey">
                                    {{itme.dictValue}}
                                  </a-select-option>
                                </a-select>
                            </a-col>
                            <a-col :span='4' style="margin-left:80px;">
                                  <a-button type="primary" :span='2' style="margin-right:20px" @click="villageList" >搜索</a-button>
                                  <a-button :span='2' @click="reset()">重置</a-button>
                            </a-col>
                      </a-row>
       		 	     </a-form>
                </div>
                <div class="v-search1" v-if="type2">
                    <a-form :form="form">
                  		<a-row :gutter='24' >
                            <a-col :span='6'>
                                  <a-form-item label="产地:"  :label-col="{ span: 6}" :wrapper-col="{ span:16 }">
                                        <a-input  placeholder="请选择产品生产地"  v-model="producePlace" class="s-place-260" @click="magSvgShowMap('departureCar')"/>
                                  </a-form-item>
                            </a-col>
                            <a-col :span='5' class="s-place-260">
                                  <a-form-item label="农产品类型:"  :label-col="{ span: 9}" :wrapper-col="{ span:14}" >
                                       <a-select placeholder="全部" v-model="type"  class="s-place-260">
                                            <a-select-option value="">全部</a-select-option>
                                            <a-select-option v-for="(itme,index) in agriList" :key="index" :value="itme.dictKey">
                                              {{itme.dictValue}}
                                            </a-select-option>
                                       </a-select>
                                  </a-form-item>
                            </a-col>
                            <a-col :span='4' >
                              <a-form-item label="价格区间:"  :label-col="{ span: 10}" :wrapper-col="{ span:10 }">
                                 <a-input  class="s-place-260"  v-model="startPrice" ></a-input>
                                 <!-- v-model="startPrice" -->
                              </a-form-item>
                            </a-col>
                             <a-col :span='2' >
                              <a-form-item >
                                  <a-input  class="s-place-260"  style="margin-left:-45px" v-model="endPrice"> </a-input>
                                  <!-- v-model="endPrice" -->
                              </a-form-item>
                            </a-col>
                            <a-col :span='2' style="margin-left:-50px;width:120px;">

                                <a-select v-model="priceUnit">
                                  <a-select-option v-for="(itme,index) in priceList" :key="index" :value="itme.dictKey">
                                    {{itme.dictValue}}
                                  </a-select-option>
                                </a-select>
                            </a-col>
                            <a-col :span='4' style="margin-left:80px;">
                                  <a-button type="primary" :span='2' style="margin-right:20px" @click="agriculList" >搜索</a-button>
                                  <a-button :span='2' @click="reset2()">重置</a-button>
                            </a-col>
                      </a-row>
       		 	     </a-form>
                </div>
                 <div class="v-search1" v-if="type3">
                    <a-form :form="form">
                  		<a-row :gutter='24' >
                            <a-col :span='5' class="s-place-260">
                                  <a-form-item label="服务类型:"  :label-col="{ span: 9}" :wrapper-col="{ span:14}" >
                                       <a-select placeholder="全部" v-model="type"  class="s-place-260">
                                            <a-select-option value="">全部</a-select-option>
                                            <a-select-option v-for="(itme,index) in agriList" :key="index" :value="itme.dictKey">
                                              {{itme.dictValue}}
                                            </a-select-option>
                                       </a-select>
                                  </a-form-item>
                            </a-col>
                            <a-col :span='6'>
                                  <a-form-item label="公司名称:"  :label-col="{ span: 6}" :wrapper-col="{ span:16 }">
                                        <a-input  placeholder="请输入公司名称"  class="s-place-260" />
                                  </a-form-item>
                            </a-col>
                            <a-col :span='4' style="margin-left:80px; float: right">
                                  <a-button type="primary" :span='2' style="margin-right:20px"  >搜索</a-button>
                                  <a-button :span='2' >重置</a-button>
                            </a-col>
                      </a-row>
       		 	       </a-form>
                </div>

             </div>
          </div>
        <div class="container-1200 retailers_bg3">
          <div class="tender-title"><span></span></div>
           <div class="v-tab">
                     <a-tabs defaultActiveKey="1" @change="changes"> 
                       <a-tab-pane tab="农产品供应" key="1">
                         <div class="tender-list">
                           <div class="tender-list-title">
                             <ul>
                               <li>农产品信息</li>
                               <li>生产者</li>
                               <li>价格</li>
                               <li>查看</li>
                             </ul>
                           </div>
                         </div>
                         <!--数据列表-->
                    <!--  <a-list  itemLayout="vertical" size="large" :pagination="pagination" :dataSource="supplyList" >
                       <a-list-item  slot="renderItem" slot-scope="item, index" key="item.title"> -->
                      <a-list size="large" :pagination="pagination" :dataSource="supplyList">
                        <a-list-item class="village-list" slot="renderItem" slot-scope="item, index" key="item.title">
                        <div class="invite-box-conent">
                              <div class="goods-pic" style="margin-top: 20px">
                                    <img :src="FileUploadUrl2+item.imgPaths">
                              </div>
                              <div class="goods-name">
                                  <h4>{{item.subject}}</h4>
                                  <div>
                                        <p>农产品类型：<span>{{item.typeValue}}</span></p>
                                        <p>农产品名称：<span>{{item.name}}</span></p>
                                        <p>产地：<span>{{item.producePlace}}</span> </p>
                                        <p>供应周期：<span>{{item.cycleStart}}月</span>-<span>{{item.cycleEnd}}月</span> </p>
                                        <p>数量：<span>{{item.number}}</span><span>{{item.numberUnitValue}}</span></p>
                                        <p>说明：<span>{{item.description}}</span></p>
                                  </div>
                              </div>
                        </div>
                        <div class="invite-box-conent">
                              <h4 class="wei_h4"> {{item.company}}</h4>
                              <div class="useStar">
                                    <span>用户星级</span>
                                    <a-rate :defaultValue="2.5" disabled allowHalf /> 
                                    <div class="attestaion" >{{item.attestationStatusValue}}</div>
                              </div>
                        </div>
                     
                        <div class="invite-box-conent">
                                  <p style="margin-top:80px;"><i class="goods-money">{{parseInt(item.price)}}</i>
                                  <span class="goods-kg" :key="index" :value="item.dictKey">{{item.priceUnitValue}}</span></p>
                        </div>
                        <div class="invite-box-conent">
                              <a-button v-if="loggedIn" class='ant-btn-primary goods-sell' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                              <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary goods-sell' type="primary">立即沟通</a-button></router-link>
                              <br/>
                              <router-link :to="{path:'/special/villageDetail/',query:{id:'01',ids:`${item.agricultureSupplyId}`}}">
                              <a-button class="goods-detail">查看详情</a-button>
                              </router-link>
                              <p style="margin-bottom: 5px">有效期：{{item.validityTerm}}天</p>
                              <span class="goods-times">发布时间：{{item.createTime?item.createTime.split(' ')[0]:''}}</span>
                        </div>
                       </a-list-item>
                     </a-list>
                       </a-tab-pane>
                       <a-tab-pane tab="农产品采购" key="2">
                             <div class="tender-list">
                           <div class="tender-list-title">
                             <ul>
                              <li>需求信息</li>
                               <li>采购商</li>
                               <li>价格</li>
                               <li>查看</li>
                             </ul>
                           </div>
                         
                         
                         </div>
                         <!--数据列表-->
                          <a-list size="large" :pagination="pagination" :dataSource="trueagriculList">
                        <a-list-item class="village-list" slot="renderItem" slot-scope="item, index" key="item.title">
                        <div class="invite-box-conent">
                              <!-- <div class="goods-pic" style="margin-top: 20px">
                                    <img :src="FileUploadUrl2+item.imgPaths">
                              </div> -->
                              <div class="goods-name">
                                  <h4>{{item.subject}}</h4>
                                  <div>
                                        <p>农产品类型：<span>{{item.typeValue}}</span></p>
                                        <p>农产品名称：<span>{{item.name}}</span></p>
                                        <p>产地：<span>{{item.producePlace}}</span> </p>
                                        <!-- <p>供应周期：<span>{{item.cycleStart}}月</span>-<span>{{item.cycleEnd}}月</span> </p> -->
                                        <p>数量：<span>{{item.number}}</span><span>{{item.numberUnitValue}}</span></p>
                                        <p>说明：<span>{{item.description}}</span></p>
                                  </div>
                              </div>
                        </div>
                        <div class="invite-box-conent">
                              <h4 class="wei_h4"> {{item.company}}</h4>
                              <div class="useStar">
                                    <span>用户星级</span>
                                    <a-rate :defaultValue="2.5" disabled allowHalf /> 
                                    <div class="attestaion" >{{item.attestationStatusValue}}</div>
                              </div>
                        </div>
                        <div class="invite-box-conent">
                                  <p style="margin-top:77px;"><i class="goods-money">{{parseInt(item.price)}}</i>
                                  <span class="goods-kg" :key="index" :value="item.dictKey">{{item.priceUnitValue}}</span></p>
                        </div>
                        <div class="invite-box-conent">
                              <a-button v-if="loggedIn" class='ant-btn-primary goods-sell' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                              <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary goods-sell' type="primary">立即沟通</a-button></router-link>
                              <br/>
                              <router-link :to="{path:'/special/villageDetail/',query:{id:'02',ids:`${item.agriculturePurchaseId}`}}">
                              <a-button class="goods-detail">查看详情</a-button>
                              </router-link>
                              <p>有效期：{{item.validityTerm}}天</p>
                              <span class="goods-times">发布时间：{{item.createTime?item.createTime.split(' ')[0]:''}}</span>
                        </div>
                       </a-list-item>
                     </a-list>
                     

                       </a-tab-pane>
                       <a-tab-pane tab="农产品配送" key="3">
                             <div class="tender-list">
                           <div class="tender-list-title">
                             <ul>
                               <li>需求信息</li>
                               <li>采购商</li>
                               <li style="margin-left:90px;">查看</li>
                             </ul>
                           </div>
                         
                         
                         </div>
                         <!--数据列表-->
                     <a-list  size="large" >
                       <a-list-item >
                        <div class="invite-box-conent">
                              <div class="goods-name">
                                  <h4>提供冷链仓储服务</h4>
                                  <div>
                                        <p>服务项目：<span>冷链仓储、冷链配送、农产品初加工</span></p>
                                        <p>服务地区：<span>云南省昆明市</span></p>
                                        <p>说明:快速配送</p>
                                  </div>
                              </div>
                        </div>
                        <div class="invite-box-conent">
                              <h4  class="wei_h4" style="margin-top: 30px"> 云南大吉大利物流管理有限公司</h4>
                              <div class="useStar">
                                    <span>用户星级</span>
                                    <a-rate :defaultValue="2.5" disabled allowHalf />
                                   
                                    <div class="attestaion" >实名认证</div>
                              </div>
                        </div>
                        <div class="invite-box-conent" style="margin-left:90px;">
                              <a-button class='goods-sell' type="primary" @click="elasticShowModal">我有货源</a-button>
                              <br/>
                              <!-- <nuxt-link :to="`/special/villageDetail/${item.agricultureSupplyId}`">
                              <a-button class="goods-detail">查看详情</a-button>
                              </nuxt-link> -->
                              <!-- <nuxt-link>
                                    <a-button class="goods-detail">查看详情</a-button>
                              </nuxt-link> -->
                              <span class="goods-times">发布时间：2019-02-21</span>
                              
                              
                        </div>
                       </a-list-item>
                        
                     </a-list>

                       </a-tab-pane>
                       </a-tabs>
                  </div>
          </div>
          <div style="background:#f6f6f6; margin-top: 20px; margin-bottom: -30px">
             <ul class="retailers_ad" style="width:1200px;overflow:hidden;margin:0 auto;"> 
                <li class="wy-m-r-20 zp-fl"><nuxt-link to="../corp"><img src="../../static/img/special/car1.jpg" alt=""></nuxt-link></li>
                <li class="wy-m-r-20 zp-fl"><nuxt-link to="../corp"><img src="../../static/img/special/car2.jpg" alt=""></nuxt-link></li>
                <li class="wy-m-r-20 zp-fl"><nuxt-link to="../corp"><img src="../../static/img/special/car3.jpg" alt=""></nuxt-link></li>
                <li class="wy-m-r-20 zp-fl"><nuxt-link to="../corp"><img src="../../static/img/special/car4.jpg" alt=""></nuxt-link></li>
                <li class="zp-fl"><nuxt-link to="../corp"><img src="../../static/img/special/car5.jpg" alt=""></nuxt-link></li>
             </ul>
          </div>


          
        </div>
              <!-- 登录后留言板弹框 -->
      <Elastic :userId="userId"  ref='elastic'></Elastic>
                <!--地图Svg显示位置-->
    <map-svg ref="mapSvgDialog" @change="mapSvgCall" ></map-svg>

</div>
  
</template>
<script>
import Elastic from './../../components/dialog/Elastic'
import { environment } from '@/server/environment'
import AuthMixin from '~/mixins/auth'
export default {
   mixins: [ AuthMixin ],
    components: {
    Elastic
  },
  data(){
    return{
      userId:'',
      departureCar:'',
      transType:'',
      detail:{
        // userId:'1'
      },
      type0:true,
      type1:false,
      type2:false,
      type3:false,
      FileUploadUrl2:environment.FileUploadUrl2,
      type:'',//农产品类型
      agriList:[],
      data:{},
      supplyList:[],
      trueagriculList:[],
      producePlace:'',//产地
      startPrice:'',
      endPrice:'',
      priceUnit:'',
      priceList:[],
      pagination: {
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showSizeChanger: true,
        total:10,
        showTotal: (total, range) => `共 ${total} 条记录`,
      },
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  created(){
    this.infoCommonDict(28)
    this.infoCommonDict(36)
    this.villageList()
    this.agriculList()
  },
  methods:{
    //切换
    changes(e) {
      // console.log(e)
      if(e == 1) {
        this.type0 = false
        this.type1 = true
        this.type2 = false
        this.type3 =  false
      }else if( e == 2) {
        this.type0 = false
        this.type1 = false
        this.type2 = true
        this.type3 = false

      }else if (e == 3) {
        this.type0 = false
        this.type1 = false
        this.type2 = false
        this.type3 = true

      }

    },
          // 显示留言板
    elasticShowModal(id){
      this.userId = id
      this.$refs.elastic.showModal(id);
    },
          // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageIndex: 1
          })
          if (res.status) {
            switch(type){
              case 28: 
                this.agriList = res.data.rows;
                break;
              case 36: 
                this.priceList = res.data.rows;
  
                this.priceUnit = this.priceList[0].dictKey;

              break;
            
            }
          }
      },
          // 省市地图回调
      mapSvgCall (d) {
            // console.log(d)
            if(d.name == 'departureCar'){
              this.producePlace = d.provCityArea
             }
           
            // this[d.name] = d.provCityArea;
          },
              // 起运地
      magSvgShowMap (name) {
        this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
      },
      //供应重置
      reset(){
        this.startPrice = '';
        this.type = '';//类型
        this.endPrice = '';
        this.producePlace = ''//产地
        this.priceUnit = this.priceList[0].dictKey;
        this.villageList()
      },
      //农产品采购重置
      reset2(){
        this.startPrice = '';
        this.type = '';//类型
        this.endPrice = '';
        this.producePlace = ''//产地
        this.priceUnit = this.priceList[0].dictKey;
        this.agriculList()

      },
      //查询获取农产品供应信息
        async villageList () {
        const res = await this.$store.dispatch('info/villageList',{
          pageSize: this.pagination.defaultPageSize,
          pageNum: this.pagination.defaultCurrent,
          type:this.type,
          producePlace: this.producePlace,
          startPrice: this.startPrice,
          endPrice: this.endPrice,
          priceUnit:this.priceUnit
        })
        // console.log(res)
        if(res.status){
          this.supplyList = res.data.rows
          this.pagination.total = res.data.total
          // console.log(this.supplyList,1111111)
        }else{
          this.supplyList = [];
          this.pagination.total = 0
        }
        
      
    },
          //查询获取农产品采购信息
        async agriculList () {
        const res = await this.$store.dispatch('info/agriculList',{
          pageSize: this.pagination.defaultPageSize,
          pageNum: this.pagination.defaultCurrent,
          type:this.type,
          producePlace: this.producePlace,
          startPrice: this.startPrice,
          endPrice: this.endPrice,
          priceUnit:this.priceUnit
        })
        // console.log(res, 88888888888888888)
        if(res.status){
          this.trueagriculList = res.data.rows
          this.pagination.total = res.data.total
          // console.log(this.trueagriculList,1111111)
        }else{
          this.trueagriculList = [];
          this.pagination.total = 0
        }
        
      
    },

  }

}
</script>
<style lang="scss">
@import "../../assets/css/index/index.scss";
@import "../../assets/css/special/nongcun.scss";
.wei_s-place-260{
  .s-place-260{
   height: 40px;
}
}

.retailers_bg3{
   .ant-tabs{
      .ant-tabs-bar{
         border-bottom: none !important;
        //  margin-bottom:30px;
        
      }
   }
.ant-tabs-ink-bar{
      background-color: #ffffff;
      display: none!important;
  }
.ant-tabs-nav .ant-tabs-tab-active{
    //   color: #15837A;
      // background: #15837A !important;
      color:#ffffff;
      border-bottom:none;


   }
.ant-tabs-nav .ant-tabs-tab:hover{
      background-color: #15837A;
      color:#ffffff;
   }
.ant-tabs-nav .ant-tabs-tab{
    width:150px;
    height:40px;
    padding:0px;
    line-height: 20px;
    font-family: NotoSansHans-Bold;
    text-align:center;
    font-size:16px;
    color:#999999;
    line-height:40px;
    border:none;
    // border-right:2px solid #dddddd;
    font-weight:700;
    margin:0;

   }
   .ant-tabs-nav .ant-tabs-tab:nth-child(2){
       border:none;
   }
   .ant-tabs-nav .ant-tabs-nav-animated{
     
   }
   .ant-list-item{
    padding-top:0;
      .invite-box-conent{
        margin-bottom: 20px;
        .wei_h4{
          margin-top:60px;
          font-size: 18px;
          color: #15837A;
          font-weight: 500;
          line-height: 18px;
        }
        margin-top: 20px;
          .goods-pic{
            width:190px;
            height:140px;
            float:left;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .goods-name{
            margin-left: 25px;
            display: block;
            float: left;
            width: 48%;
            h4{
              margin-top: 14px;
            }
            p{
              margin-bottom: 3px;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
       }
   }

}
.village-list{
  padding-bottom: 0px !important;
  padding:0px !important;
}
.retailers_ad{
    margin: 0;
    padding-bottom: 20px;
      padding-top:20px;
    background-color:#F6F6F6;
   li{
      width:220px;
      height:180px;
      margin-right: 25px;
      img{
         width: 100%;
         height: 100%;
      }
   }
   li:last-child{
    margin-right: 0;
   }
}
.h-banner{
  width: 100%;
  height: 500px;
  background: url('~static/img/special/nongcun.jpg') center top / cover no-repeat;
  
}

.h-banner2{
   width: 100%;
  height: 500px;
   background: url('~static/img/special/tetailers.jpg') center top / cover no-repeat;
}
</style>

